<template>
  <div>
    <h1>App</h1>
    <p>count:{{ count }}</p>
    <button @click="addCount">addCount</button>


    <p>count:{{ person }}</p>
    <button @click="changeAge">addCount</button>

  </div>
</template>

<script lang="ts">
 import { defineComponent } from "vue"
  export default  defineComponent({
    name:'App',
    });
</script>

<script setup lang="ts">
import { ref } from "vue";
/* 
  使用ref方法来创建响应式数据:
    - 接受一个内部值，返回一个响应式的、可更改的 ref 对象
    - 此对象只有一个指向其内部值的属性 .value
    - 它也是响应式的，即所有对 .value 的操作都将被追踪
    - ref创建的响应式数据在模板中使用的时候不需要家.value,在setup中进行操作数据的时候要添加.value


    ref创建一个对象类型的响应式数据
    - ref直接接收对象数据即可
    - 内部会先把接收的对象通过new Proxy()方式创建为代理对象
    - 然后把代理对象放在ref对象的value属性上
    - 代理对象就可以劫持到对象的各种操作（不再使用vue2的defineProperty做数据劫持了）

    
     使用ref方法的类型限制
    - ref方法接受一个泛型,可以传递内部value数据的类型
*/

const count = ref<number>(1);

console.log(count);

const addCount = () => {
  count.value++
};

interface personType {
  name:string;
  age:number
  sex:string
  height?:number
}

// 对象用类型限制
const person = ref<personType>({
  name:"小黑子",
  age:18,
  sex:"男"
});
console.log(person);
const changeAge = ()=>{
  person.value.age++
}


</script>

<style lang="less" scoped>
  
</style>
